<template>
  <div>
    <div id="container">
      <div v-for="(obj, index) in articles" :key="index" class="object-div">
        <a href="#" @click.prevent="goToArticle(obj.id)" class="click">
          <h1>{{ obj.title }}</h1>
          <p>概述：{{ obj.author }}</p>
          <p>{{ obj.summary }}</p>
          <p id="views">浏览:{{ obj.viewCounts }}</p>
        </a>
        <!-- 编辑和删除按钮，间隔50px -->
        <div class="action-buttons">
          <a href="#" @click.prevent="editArticle(obj.id)">编辑</a>
          <a href="#" @click.prevent="deleteArticle(obj.id, index)">删除</a>
        </div>
      </div>
      <p>
          <label for="username">页数:{{pageAaa}} </label>
          <input type="number" id="page" name="page" v-model="inputPage" placeholder="请输入页数" @keyup.enter="goToInputPage">
          <button id="pagejian" @click="goToPreviousPage">上一页</button>
          <button id="pathjia" @click="goToNextPage">下一页</button>
      </p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import router from '@/router.js';
import { ElMessage } from 'element-plus';
import vuex from '@/vuex.js';

// 默认数据
const defaultArticles = [];

// 定义响应式数据
const articles = ref([
  {
    id: 1,
    title: '默认文章标题一：Vue组件开发技巧',
    author: '张三',
    summary: '本文介绍了Vue组件的生命周期和自定义指令开发技巧，适合中级前端开发者学习。',
    viewCounts: 1280
  },
  {
    id: 2,
    title: '默认文章标题二：前端性能优化实践',
    author: '李四',
    summary: '从网络请求、资源加载、渲染优化三个维度，详细讲解前端性能优化的实战方法。',
    viewCounts: 956
  }
]);
const pageAaa = ref(1);
const inputPage = ref('');

// 创建自定义的 axios 实例
const customAxios = axios.create({
  baseURL: 'http://localhost:8888',
  timeout: 5000
});
customAxios.defaults.transformResponse = [];

// 上一页
function goToPreviousPage() {
  if (pageAaa.value > 1) {
    pageAaa.value--;
    getPostArticles();
  }
}

// 下一页（修正方法名）
function goToNextPage() {
  pageAaa.value++;
  getPostArticles();
}

// 跳转到指定页码
function goToInputPage() {
  const input = parseInt(inputPage.value);
  if (input >= 1) {
    pageAaa.value = input;
    getPostArticles();
  } else {
    ElMessage.error('请输入有效的页码！');
  }
  inputPage.value = ''; // 清空输入框
}

// 安全解析 JSON 字符串，处理大整数
function safeJsonParse(jsonStr) {
  const regex = /"(\w+)":([^,}]+)/g;
  let match;
  let result = '';
  let index = 0;
  while ((match = regex.exec(jsonStr)) !== null) {
    const key = match[1];
    let value = match[2];
    if (key === 'id' && /^\d+$/.test(value)) {
      const numValue = Number(value);
      if (numValue > Number.MAX_SAFE_INTEGER) {
        value = `"${value}"`;
      }
    }
    result += jsonStr.slice(index, match.index) + `"${key}":${value}`;
    index = regex.lastIndex;
  }
  result += jsonStr.slice(index);
  return JSON.parse(result);
}

const token = vuex.state.curToken;

// 获取我的文章列表的函数
const getPostArticles = async () => {
  try {
    const res = await customAxios.post('/articles/my', 
      {
        page: pageAaa.value,
        pageSize: 10
      },
      {
        headers: {
          Authorization: token
        }
      }
    );
    const parsedData = safeJsonParse(res.data);
    console.log('手动解析后的原始响应数据:', parsedData);
    articles.value = parsedData.data;
    console.log('articles 数组为', articles);
  } catch (error) {
    console.error('获取文章列表失败:', error);
    ElMessage.error('获取文章列表失败，请重试');
  }
};

// 页面挂载时调用 getPostArticles 函数
onMounted(() => {
  getPostArticles(); // 取消注释，启用接口请求
  // articles.value = defaultArticles; // 注释掉默认数据，避免覆盖接口数据
});

// 路由跳转函数（查看文章详情）
const goToArticle = (articleId) => {
  console.log("跳转至文章详情，ID：" + articleId);
  router.push({ name: 'Article', params: { articleId } });
};

// 编辑文章（跳转至编辑页面）
const editArticle = (articleId) => {
  // console.log("跳转至编辑页面，ID：" + articleId);
  // // 假设编辑页面路由名为 'EditArticle'，请根据实际路由配置修改
  // router.push({ name: 'EditArticle', params: { articleId } });
  ElMessageBox.confirm('暂未开放编辑文章功能', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
};


// 删除文章（带确认框和接口请求）
const deleteArticle = (articleId, index) => {
  ElMessageBox.confirm('确定要删除这篇文章吗？此操作不可恢复', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用删除接口
    customAxios.delete(`/articles/${articleId}`,{
  headers: {
    Authorization: token // 确保 token 变量已正确赋值
  }
})
      .then(() => {
        // 从本地数据移除
        articles.value.splice(index, 1);
        ElMessage.success('文章删除成功');
      })
      .catch(error => {
        console.error('删除文章失败:', error);
        ElMessage.error('删除失败，请稍后重试');
      });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>

<style scoped>
#container {
  padding: 10px;
}
#views {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  color: gray;
}
a {
  text-decoration: none;
  color: #333;
}
p {
  width: 80%;
  color: #333;
  margin: 5px 0;
}
.click {
  position: relative;
}
.object-div {
  border-radius: 5px;
  background-color: #faf9f6;
  margin-bottom: 15px;
  padding: 15px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}
.object-div:hover {
  transform: translateY(-5px); /* 向上移动 5px */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 加深阴影，增强悬浮感 */
}
.property-div {
  margin-top: 5px;
}
p label,
p input,
p button {
  margin-right: 5px;
  height: 30px;
  box-sizing: border-box;
}
p input,
p button {
  width: 100px;
}

/* 编辑和删除按钮样式（无下划线，间隔50px） */
.action-buttons {
  margin-top: 10px;
  display: flex;
}
.action-buttons a {
  color: #000407;
  padding: 4px 12px;
  border: 1px solid #c0e2ff;
  border-radius: 4px;
  transition: all 0.3s;
}
.action-buttons a:first-child {
  margin-right: 50px; /* 保持50px间隔 */
}
.action-buttons a:hover {
  color: #010b16;
  border-color: #8cc5ff;
  background-color: #ecf5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(64, 158, 255, 0.2);
}
</style>